<template>
  <div class="container-width">
    <div class="custom-slider bgc-white pad-20 mar-b-10 mar-t-30">
      <div class="flex flex-baseline mar-t-2">
        <span class="font-32 font-color-3 font-w pad-r-20">{{ content.propMap.mainTitle }}</span>
        <div class="font-16 font-color-6 flex tab-box">
          <span class="mar-r-15">{{ content.propMap.subTitle }}</span>
        </div>
      </div>
      <div class="mar-t-16">
        <div class="goods-list flex flex-wrap mar-r--20">
          <div v-for="(itemGoods, indexGoods) in content.goodsList" :key="indexGoods"
            class="goods-bar mar-r-20 mar-b-20 cursor-p position-r" @click="goodsEls(itemGoods)">
            <el-image class="image" :src="itemGoods.imgUrl" lazy />
            <div class="goods-info">
              <div class="flex flex-between">
                <div class="_line-1">{{itemGoods.title}}</div>
              </div>
              <div class="flex flex-between v-align-c pad-t-6">
                <div class="price font-16 font-w">￥{{itemGoods.distributePrice || '0.00'}}</div>
                <div class="font-12 _line-1 short-name">众项云企</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  export default defineComponent({
    name: 'CustomSliderFourth',
    props: {
      content: {
        type: Object,
        default: () => ({})
        // type: Array,
        // default: () => []
      }
    },
    setup() {
      const router = useRouter()
      onMounted(() => {})
      const goodsEls = (item: any) => {
        jumpPage(router, 1, 1, 2001, '?goodsId=' + item.goodsId, 1)
      }

      return {
        goodsEls
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $goodsWidth: 210px;

  .custom-slider {
    .subject-box {
      align-items: baseline;
    }

    .tab-box {
      position: relative;
      top: 2px;
    }

    .s-img {
      .el-image {
        width: 264px;
        height: 368px;
        margin-right: 10px;
        cursor: pointer;
      }
    }

    .goods-list {
      .goods-bar {
        width: $goodsWidth;
      }

      ::v-deep(.image) {
        display: block;
        width: $goodsWidth;
        height: 302px;
      }

      .goods-info {
        width: $goodsWidth;
        // height: 142px;
        padding: 4px 8px 8px 8px;
        box-sizing: border-box;
        overflow: hidden;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(248, 248, 248, 0.65);
      }

      .short-name {
        width: 92px;
        text-align: right;
      }

      ._line-1 {
        /* line-height: 1.4; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }

      ._line-2 {
        /* line-height: 1.4; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }

      .btn-goods {
        background: #2de2dd;
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
      }
    }
  }
</style>
